import { Component, OnInit } from '@angular/core';
import { NzModalService, NzMessageService } from 'ng-zorro-antd';
import { GroupService } from 'src/app/core/service/group.service';
import { Router } from '@angular/router';
// 导入表单相关：表单验证、表单构建、表单组
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { UserService } from 'src/app/core/service/user.service';
import { AddGroupUserComponent } from './add-group-user/add-group-user.component';
import { EditGroupUserComponent } from './edit-group-user/edit-group-user.component';

@Component({
  selector: 'app-group-users',
  templateUrl: './group-users.component.html',
  styleUrls: ['./group-users.component.scss']
})
export class GroupUsersComponent implements OnInit {
  // 表单验证
  groupName: FormGroup;
  warning = '组名不能为空';
  isHidden = true; // 隐藏警告提示
  allChecked = false;
  indeterminate = false;
  displayData = [];

  isVisible = false;
  isOkLoading = false;

  filter: string;

  // 表格显示样式（页码、每页显示多少页、总共几页、获取到的数据）
  pageIndex = 1;      // 页码标识
  pageSize = 10;      // 每页展示多少数据 —— 10条
  total = 1;          // 总共1页
  dataSet = [];       // 数据集合
  loading = true;     // 加载
  sortValue = null;   // 种类值
  sortKey = null;     // 种类关键值
  searchGenderList: string[] = [];

  status = true;

  cancel(): void {
    this.nzMessageService.info('取消删除!');
  }

  /**
   * 小组用户
   * @param groupUuid 用户的 Uuid
   */
  delete(groupUuid: string): void {
    this.userService.deleteGroupUser(groupUuid).subscribe(deleteData => {
      if (deleteData.status === 1) {
        this.nzMessageService.success('删除成功!');
        this.getGroupPage();
      }
    });
  }

  constructor(
    private router: Router,
    private groupService: GroupService,
    private modalService: NzModalService,
    fb: FormBuilder,
    private userService: UserService,
    private nzMessageService: NzMessageService
  ) {
    this.groupName = fb.group({
      groupname: [null, Validators.compose([Validators.required])],
    });
  }

  get groupname() { return this.groupName.controls.groupname; }

  /**
   * 获取小组列表
   * @param reset 重置
   */
  getGroupPage(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }
    this.groupService.getGroupPage(this.pageIndex, this.pageSize, this.filter)
      .subscribe((groupPage) => {
        console.log(`=== 收到json数据 ===> ${groupPage}`);
        this.loading = false; // 获取到数据之后，不再显示加载图标
        this.total = groupPage.total;   // 数据的条数
        this.dataSet = groupPage.data;        // 数据集
        console.log('=== groupPage现在的数据 ===', groupPage.data);
      });
  }

  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
    this.displayData = $event;
    this.refreshStatus();
  }

  /**
   * 刷新状态
   */
  refreshStatus(): void {
    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  ngOnInit(): void {
    this.getGroupPage();
  }

  /**
   * 创建用户的模态框
   */
  createGroupUserModal(): void {
    const modal = this.modalService.create({
      nzTitle: '创建小组',
      nzContent: AddGroupUserComponent,
      nzComponentParams: {
      },
      nzFooter: null
    });
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    modal.afterClose.subscribe(result => { this.getGroupPage(); });
  }

  /**
   * 创建修改用户的模态框
   * @param groupUuid Uuid
   */
  updateGroupUserModal(groupName: string, groupUuid: string): void {
    const modal = this.modalService.create({
      nzTitle: '修改小组',
      nzContent: EditGroupUserComponent,
      nzComponentParams: {
        groupName: groupName,
        groupUuid: groupUuid
      },
      nzFooter: null
    });
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    modal.afterClose.subscribe(result => {
      console.log('关闭弹框');
      this.getGroupPage();
    });
  }
}
